Component({
  properties: {
    // 表头列名
    titleColumns: {
      type: Array,
      value: []
    },
    // 表格数据
    tableDatas: {
      type: Array,
      value: []
    },
    // 无数据填充
    noDataMsg: {
      type: String,
      value: "未填写"
    }
  },
  data: {
    sortOrder: {} // 设置需要排序的列 eg: {name:asc}
  },
  methods: {
    /**
     * 根据指定列名，对表格数据进行排序
     * @param {Object} e 点击事件传递的数据
     */
    sortTableHandle(e) {
      // 判断列是否支持排序
      const columnSort = e.currentTarget.dataset.sort;
      if ("false" === columnSort) {
        return;
      }

      // 获取列名的键
      const columnKey = e.currentTarget.dataset.key;
      // 保持只有一列的排序设置
      if (this.data.sortOrder[columnKey] === undefined) {
        this.setData({sortOrder: {}});
      }

      // 设置排序列，默认优先以升序排序
      const order = this.data.sortOrder[columnKey] = (this.data.sortOrder[columnKey] || 'asc') === 'asc' ? 'desc' : 'asc';

      // 根据列对表格数据进行排序，返回排序后的表格数据
      const sortedData = [...this.data.tableDatas].sort((a, b) => {
        if (a[columnKey] > b[columnKey]) return order === 'asc' ? 1 : -1;
        if (a[columnKey] < b[columnKey]) return order === 'asc' ? -1 : 1;
        return 0;
      });
      this.setData({tableDatas: sortedData});
    }
  },
  lifetimes: {
    attached() {
      // 列名 列名标识 列宽（请根据字段的值，给定合适的列宽） 是否可排序
      const titles = [
        { title: "姓名", key: "name", width: 120, isSort: "true" },
        { title: "性别", key: "sex", width: 100, isSort: "true" },
        { title: "年龄", key: "age", width: 100, isSort: "true" },
        { title: "用户地址", key: "address", width: 400, isSort: "false" },
        { title: "手机", key: "phone", width: 200, isSort: "true" },
      ]
      const tables = [
        {
          id: "1",
          name: "张三",
          sex: "男",
          age: 28,
          address: "北京市朝阳区北土城东路芍药居小区芍药居里2号院",
          phone: "18343457584"
        },
        {
          id: "2",
          name: "李四",
          sex: "",
          age: 27,
          address: "北京市岳麓区枫林三路卫星大厦",
          phone: "18343457584"
        },
        {
          id: "3",
          name: "小红",
          sex: "女",
          age: 23,
          address: "上海浦东新区翻斗花园2号1001室",
          phone: "18294357843"
        },
        {
          id: "4",
          name: "高启强",
          sex: "男",
          age: 26,
          address: "京海市（建工）强盛集团",
          phone: "13489435332"
        },
        {
          id: "5",
          name: "高启盛",
          sex: "男",
          age: 25,
          address: "京海市（建工）强盛集团",
          phone: "13432845902"
        },
        {
          id: "6",
          name: "高启兰",
          sex: "女",
          age: 24,
          address: "京海市（建工）强盛集团",
          phone: "13489432304"
        },
        {
          id: "7",
          name: "严莉莉",
          sex: "女",
          age: 23,
          address: "上海浦东新区翻斗花园2号1001室",
          phone: "18294357843"
        },
        {
          id: "8",
          name: "David",
          sex: "男",
          age: 34,
          address: "250 Richmond Terrace,Staten Island, NY",
          phone: "234-8345"
        },
        {
          id: "9",
          name: "Edward",
          sex: "男",
          age: 31,
          address: "251 Richmond Terrace,Staten Island, NY",
          phone: "456-7890"
        }
      ]

      this.setData({
        titleColumns: titles,
        tableDatas: tables
      });
    }
  }
});